<template>
	<view>
		<camera :device-position="device" @error="error" :flash="flash"
			:style="{ width: '100%',position: 'relative', height: getHeight + 'px' }">>
			<cover-view class="setDiv">
				<cover-image class="sxt" src="../../static/image/xj.png" @click="sxtClick"></cover-image>
				<cover-image class="sgd" :src="sgdSrc" @click="sgdSrcClick"></cover-image>
			</cover-view>
			<!-- 返回按钮 -->
			<cover-view @click="backButton" class="back">取消</cover-view>
			<!-- 拍照按钮 -->
			<cover-image @click="takePhoto" class="photograph" src="../../static/image/pz.png"></cover-image>
			<cover-view @click="reportBtn" class="report" v-if="imgList.length > 0">提交（{{imgList.length}}）</cover-view>

			<!-- 底部 预览图片 -->
			<cover-view class="bottomBg" v-if="imgList.length > 0">
				<cover-view>
					<cover-view @click="ViewImage(index)" class="imgBox" v-for="(item,index) in imgList" :key="index">
						<cover-image class="imgItem" :src="item.src" mode="aspectFill"></cover-image>
						<cover-view class="cu-tag" @tap.stop="DelImg" :data-index="index">
							<cover-image class="iconClose" src="https://cdn.zhoukaiwen.com/icon_close.png"
								mode="aspectFill"></cover-image>
						</cover-view>
					</cover-view>
				</cover-view>
			</cover-view>

		</camera>
		<view style="position: absolute;top: -999999px;">
			<view><canvas :style="{ width: w, height: h }" canvas-id="firstCanvas"></canvas></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				StatusBar: this.StatusBar, //状态栏高度
				navheight: this.navheight, //导航条高度
				device: 'front', //前置front或后置摄像头back, 
				src: "",
				sgdSrc: '../../static/image/sgd-off.png',
				flash: 'off', //闪光灯，值为auto, on, off
				getHeight: '400',
				rights: 0,
				imgList: [{
					src: "https://cdn.zhoukaiwen.com/angular.jpg"
				}],
				w: '',
				h: '',
			}
		},
		onLoad() {
			uni.getSystemInfo({
				success: (res) => {
					this.getHeight = res.windowHeight;
				}
			});
			if (this.Custom) this.rights = this.Custom.right;
		},
		methods: {
			// 提交
			reportBtn() {

			},

			ViewImage(index) { // 查看照片
				const imgList = [this.imgList[index].src];
				console.log(imgList)
				uni.previewImage({
					urls: imgList
				});
			},

			DelImg(e) { //删除照片
				uni.showModal({
					// title: '异常照片',
					content: '确定要删除这张照片吗？',
					cancelText: '取消',
					confirmText: '确认',
					success: res => {
						if (res.confirm) {
							console.log(e)
							this.imgList.splice(e.currentTarget.dataset.index, 1)
							console.log(this.imgList)

							var arr = this.imgList;
							var str = '';
							for (var i = 0; i < arr.length; i++) {
								str += arr[i].src + ",";
							}
							this.imgListData = str;
							console.log(this.imgListData)
						}
					}
				})
			},
			// 拍照按钮事件
			takePhoto() {
				const ctx = uni.createCameraContext();
				ctx.takePhoto({
					quality: 'high',
					success: (res) => {
						this.src = res.tempImagePath;
						this.imgList.push({
							src: res.tempImagePath
						})
					}
				});
			},
			error(e) {
				console.log(e.detail);
			},
			/**切换闪光灯,*/
			sgdSrcClick() {
				if (this.flash == 'off') {
					this.flash = 'on'
					this.sgdSrc = '../../static/image/sgd-on.png'
				} else {
					this.flash = 'off'
					this.sgdSrc = '../../static/image/sgd-off.png'
				}
				console.log(this.flash, '切换闪光灯')
			},
			/**切换摄像头*/
			sxtClick() {
				if (this.device == "front") {
					this.device = "back";
				} else {
					this.device = "front";
				}
				console.log(this.device, '前置front或后置摄像头back')
			},

			backButton() {
				uni.navigateBack()
			},
		}
	}
</script>

<style lang="less" scoped>
	.setDiv {
		position: absolute;
		right: 12px;
		bottom: 240px;

		.sxt {
			width: 38px;
			height: auto;
			margin-bottom: 25px;
		}

		.sgd {
			width: 40px;
			height: auto;
		}
	}

	// 拍照按钮的位置
	.photograph {
		position: absolute;
		width: 54px;
		height: 54px;
		left: calc(50% - 27px);
		border-radius: 50%;
		bottom: 170rpx;
	}

	// 提交按钮
	.report {
		height: 68rpx;
		line-height: 68rpx;
		text-align: center;
		color: #FFFFFF;
		box-sizing: border-box;
		padding: 0rpx 20rpx;
		border-radius: 10rpx;
		background-color: #2157FF;
		position: absolute;
		bottom: 180rpx;
		right: 8px;
	}

	// 返回按钮
	.back {
		height: 68rpx;
		line-height: 68rpx;
		text-align: center;
		color: #FFFFFF;
		box-sizing: border-box;
		padding: 0rpx 20rpx;
		border-radius: 10rpx;
		background-color: transparent;
		border: 1px solid #ffffff;
		position: absolute;
		bottom: 180rpx;
		left: 8px;
	}

	// 底部预览
	.bottomBg {
		width: 100%;
		height: 160rpx;
		box-sizing: border-box;
		padding: 20rpx 30rpx 40rpx;
		position: absolute;
		bottom: 0;
		left: 0;
		background-color: rgba(0, 0, 0, .8);
		display: flex;
		justify-content: space-between;
		align-items: center;
		overflow-x: scroll;

		.imgBox {
			width: 110rpx;
			height: 110rpx;
			float: left;
			margin-right: 40rpx;
			position: relative;

			.cu-tag {
				position: absolute;
				right: 0;
				top: 0;
				border-bottom-left-radius: 2px;
				padding: 3px 5px;
				height: auto;
				background-color: rgba(0, 0, 0, 0.5);
				width: 15px;
				vertical-align: middle;
				font-family: Helvetica Neue, Helvetica, sans-serif;
				white-space: nowrap;
				color: #ffffff;
			}
		}

		.imgItem {
			width: 110rpx;
			height: 110rpx;
		}
	}
</style>